<template>
  <div class="login_wrapper">
    <div class="login_content">
      <div class="login_form">
        <p class="title">登陆系统账号</p>
        <div>
          <p style="margin: 10px 0;">账号:</p>
          <p><input type="text" v-model="username"></p>
        </div>
        <div>
          <p style="margin: 10px 0;">密码:</p>
          <p><input type="password" v-model="password"></p>
        </div>
        <div>
          <p style="margin: 10px 0;">
            <button @click="login">登陆</button>
            <router-link to="/register" style="text-decoration: none">
              <a class="login_register" style="float: left;margin-top: 5px">没有账号？马上注册</a>
            </router-link>
            <router-link to="/resetPwd">
              <a class="login_register" style="float: right;margin-top: 5px">忘记密码？</a>
            </router-link>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import axios from 'axios';
  import {apiPre} from '../js/config';

  export default {
    name: "login",
    data() {
      return {
        username: '',
        password: ''
      }
    },
    methods: {
      login() {
        axios.post(apiPre + 'login',
          {
            username: this.username,
            password: this.password
          }).then((res) => {
          console.log(res);
          if (res.data.status == 0) {
            this.$Notice.warning({desc: '用户不存在', duration: 2})
          } else if (res.data.status == 1) {
            this.$Notice.warning({desc: '密码错误', duration: 2})
          } else if (res.data.status == 2) {
            this.$Notice.success({desc: '登陆成功', duration: 2});
            window.localStorage.setItem('screeningLogin', res.data.token);
            window.localStorage.setItem('user', this.username);
            this.$router.push('/main')
          }
        }).catch((err) => {
          this.$Notice.error({desc: '登陆失败', duration: 2})
        })
      }
    },
    mounted() {
      console.log(this.$route.params.type);
    }
  }
</script>

<style scoped lang="scss">
  .login_wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  .login_content {
    margin: 100px auto;
    background-image: url("../assets/login_bk.jpg");
    height: 400px;
    width: 800px;
    position: relative;
    border-radius: 5px;
  }

  .login_form {
    position: absolute;
    right: 40px;
    top: -40px;
    background-color: rgb(255, 255, 255);
    height: 480px;
    width: 380px;
    padding: 40px;
    border: 1px solid #e5e5e5;
    border-radius: 3px;
    //增加阴影效果
    box-shadow: 2px 2px 56px rgba(0, 0, 0, .13);
    -webkit-box-shadow: 2px 2px 56px rgba(0, 0, 0, .13);
    .title {
      font-size: 30px;
      margin: 30px 0;
    }
    input {
      width: 290px;
      height: 30px;
      border-radius: 3px;
      border: 1px solid #dddee1;
      padding: 0 5px;
    }
    button {
      width: 100%;
      background-color: #2d8cf0;
      border-color: #2d8cf0;
      border-radius: 4px;
      padding: 6px;
      font-size: 16px;
      color: #fff;
      margin-top: 20px;
    }
    .login_register {
      font-size: 10px;
      color: rgb(41, 101, 168);
    }

    .login_register:link {
      text-decoration: none;
    }

    .login_register:hover {
      text-decoration: underline;
    }
  }
</style>
